<!DOCTYPE html>
<html>
    <head>
        <title>
            Familibook >> Test
        </title>
        <script>
            function getTries(name) {
                if (name.length > 11) {
                    return 20;
                }
                else if (name.length < 10 && name.length > 5) {
                    return (name.length * 2);
                }
                else {
                    return Math.floor(name.length * 2.5);
                }
            }
            function getFont(ctx, name, tries) {
                for (var i = 0; i < tries; i++) {
                    var fontc = "bold " + (i * 0.1) + "em sans-serif";
                    ctx.font = fontc;
                    var metric = ctx.measureText(name);
                    var widthf = metric.width;
                    if (widthf > 115) {
                        return font;
                    }
                    var font = fontc;
                }
            }
            function Person() {
                this.id = 0;
                this.name = "Anonymous";
                this.spouse;
                this.parentsArray = new Array();
                this.childrenArray = new Array();
                this.sex = "Male";
                this.box;
                this.imageurl = "../pics/" + this.sex + "-avatar.png";
            }
            function Box() {
                this.person = new Person();
                this.x = 0;
                this.y = 0;
                this.drawn = false;
                this.assigned = false;
                this.level = 0;
            }
            var gf = new Person();
            var gm = new Person();
            var fr = new Person();
            var mr = new Person();
            var sn = new Person();
            var dt = new Person();
            
            var DisplayMatrix = new Array(2);
            for (var x = 0; x < DisplayMatrix.length; x++) {
                DisplayMatrix[x] = new Array(3);
            }
            for (var i = 0; i < DisplayMatrix.length; i++) {
                for (var j = 0; j < DisplayMatrix[i].length; j++) {
                    DisplayMatrix[i][j] = new Box();
                    DisplayMatrix[i][j].level = j + 1;
                    DisplayMatrix[i][j].y = (j * 100) + 25;
                    DisplayMatrix[i][j].x = (i * 225) + 10;
                }
            }

            function feedData() {
                gf.id = 1;
                gf.name = "Ananda Mohon Sarkar";
                gf.spouse = gm;
                gf.childrenArray[0] = fr;
                gf.childrenArray[1] = mr;
                gf.sex = "Male";
                gf.imageurl = "../pics/" + gf.sex + "-avatar.png";
                gf.box = getbox(gf);
                gf.box.assigned = true;
                gf.box.person = gf;

                gm.id = 2;
                gm.name = "Pratima Sarkar";
                gm.spouse = gf;
                gm.childrenArray[0] = fr;
                gm.childrenArray[1] = mr;
                gm.sex = "Female";
                gm.imageurl = "../pics/" + gm.sex + "-avatar.png";
                gm.box = getbox(gm);
                gm.box.assigned = true;
                gm.box.person = gm;

                fr.id = 3;
                fr.name = "Sourabh Sarkar";
                fr.spouse = mr;
                fr.childrenArray[0] = sn;
                fr.childrenArray[1] = dt;
                fr.parentsArray[0] = gf;
                fr.parentsArray[1] = gm;
                fr.sex = "Male";
                fr.imageurl = "../pics/" + fr.sex + "-avatar.png";
                fr.box = getbox(fr);
                fr.box.assigned = true;
                fr.box.person = fr;

                mr.id = 4;
                mr.name = "Reena Sarkar";
                mr.spouse = fr;
                mr.childrenArray[0] = sn;
                mr.childrenArray[1] = dt;
                mr.parentsArray[0] = gf;
                mr.parentsArray[1] = gm;
                mr.sex = "Female";
                mr.imageurl = "../pics/" + mr.sex + "-avatar.png";
                mr.box = getbox(mr);
                mr.box.assigned = true;
                mr.box.person = mr;

                sn.id = 5;
                sn.name = "Nirmaan Sarkar";
                sn.parentsArray[0] = fr;
                sn.parentsArray[1] = mr;
                sn.sex = "Male";
                sn.imageurl = "../pics/" + sn.sex + "-avatar.png";
                sn.box = getbox(sn);
                sn.box.assigned = true;
                sn.box.person = sn;

                dt.id = 6;
                dt.name = "Sohana Sarkar";
                dt.parentsArray[0] = fr;
                dt.parentsArray[1] = mr;
                dt.sex = "Female";
                dt.imageurl = "../pics/" + dt.sex + "-avatar.png";
                dt.box = getbox(dt);
                dt.box.assigned = true;
                dt.box.person = dt;
            }

            function getbox(person) {
                if (person.parentsArray.length !== 0) {
                    var anti = 0;
                    for (var i = 0; i < DisplayMatrix.length; i++) {
                        if (DisplayMatrix[i][person.parentsArray[0].box.level].assigned)
                            continue;
                        else if (!DisplayMatrix[i][person.parentsArray[0].box.level].assigned) {
                            anti = i;
                            break;
                        }
                    }
                    return DisplayMatrix[anti][person.parentsArray[0].box.level];
                }
                if (person.spouse !== undefined) {
                    if (person.spouse.box !== undefined) {
                        var anti = 0;
                        for (var i = 0; i < DisplayMatrix.length; i++) {
                            if (DisplayMatrix[i][person.spouse.box.level].assigned)
                                continue;
                            else if (!DisplayMatrix[i][person.spouse.box.level - 1].assigned) {
                                anti = i;
                                break;
                            }
                        }
                        return DisplayMatrix[anti][person.spouse.box.level - 1];
                    }
                }
                if (person.parentsArray.length == 0) {
                    var anti = 0;
                    for (var i = 0; i < DisplayMatrix.length; i++) {
                        if (DisplayMatrix[i][0].assigned)
                            continue;
                        else if (!DisplayMatrix[i][0].assigned) {
                            anti = i;
                            break;
                        }
                    }
                    return DisplayMatrix[anti][0];
                }
            }

            function drawCanvas() {
                var ctx = canvas.getContext('2d');
                feedData();
                manageStrokes(ctx);
                managePersonalBoxes(ctx);
            }

            function managePersonalBoxes(ctx) {
                for (var i = 0; i < DisplayMatrix.length; i++) {
                    for (var j = 0; j < DisplayMatrix[i].length; j++) {
                        if (DisplayMatrix[i][j].person.id !== 0) {
                            drawPersonalBox(ctx, DisplayMatrix[i][j].person);
                        }
                    }
                }
            }

            function manageStrokes(ctx) {
                for (var i = 0; i < DisplayMatrix.length; i++) {
                    for (var j = 0; j < DisplayMatrix[i].length; j++) {
                        for (var k = 0; k < DisplayMatrix[i][j].person.parentsArray.length; k++) {
                            drawStroke(ctx, DisplayMatrix[i][j].person, DisplayMatrix[i][j].person.parentsArray[k], true);
                        }
                        for (var k = 0; k < DisplayMatrix[i][j].person.childrenArray.length; k++) {
                            drawStroke(ctx, DisplayMatrix[i][j].person, DisplayMatrix[i][j].person.childrenArray[k], true);
                        }
                        if (DisplayMatrix[i][j].person.spouse !== undefined) {
                            drawStroke(ctx, DisplayMatrix[i][j].person, DisplayMatrix[i][j].person.spouse, false);
                        }
                    }
                }
            }

            function getMousePos(canvas, evt) {
                var obj = canvas;
                var top = 0;
                var left = 0;
                while (obj.tagName != 'BODY') {
                    top += obj.offsetTop;
                    left += obj.offsetLeft;
                    obj = obj.offsetParent;
                }
                var mouseX = evt.clientX - left + window.pageXOffset;
                var mouseY = evt.clientY - top + window.pageYOffset;
                return {
                    x: mouseX,
                    y: mouseY
                };
            }
            function drawStroke(ctx, parentorspouse, sonorspouse, whetherparentrelationorspousetrueifparentfalseifspouse) {
                var st1 = parentorspouse;
                var nd2 = sonorspouse;
                var rel = whetherparentrelationorspousetrueifparentfalseifspouse;
                var initx = st1.box.x + 100;
                var inity = st1.box.y + 38;
                var endx = nd2.box.x + 100;
                var endy = nd2.box.y + 38;
                var ymidy = (endy + inity) / 2;

                if (rel) {
                    ctx.beginPath();
                    ctx.moveTo(initx, inity);
                    ctx.lineTo(initx, ymidy);
                    ctx.lineTo(endx, ymidy);
                    ctx.lineTo(endx, endy);
                    ctx.stroke();
                }
                else if (!rel) {
                    ctx.beginPath();
                    ctx.moveTo(initx, inity);
                    ctx.lineTo(endx, endy);
                    ctx.stroke();
                }
            }
            function drawPersonalBox(ctx, person) {
                var width = 200;
                var height = 75;
                var border = 3;
                var name = person.name;
                var tries = getTries(name);
                var imagewidth;
                var imageheight;
                var imagedownscaling = 2.6;
                var x = person.box.x;
                var y = person.box.y;
                var imageurl = person.imageurl;

                canvas.addEventListener('mousedown', function(e){
                    mousepos = getMousePos(canvas, e);
                    if( mousepos.x > x && mousepos.x < x + 200 && mousepos.y < y + 75 && mousepos.y > y ){
                        window.location = "/detail?id=" + person.id;
                    }
                }, false);

                var img = new Image();
                img.onload = function () {
                    imagewidth = img.width / imagedownscaling;
                    imageheight = img.height / imagedownscaling;
                    ctx.drawImage(img, x + border + 2, y + border + 2, imagewidth, imageheight);
                };
                img.src = imageurl;



                imagewidth = 70;
                ctx.beginPath();
                ctx.fillStyle = "#0000ff";
                ctx.fillRect(x, y, width, height);
                ctx.fillStyle = "#446688";
                ctx.fillRect(x + border, y + border, width - (border * 2), height - (border * 2));
                ctx.fillStyle = "#c2406f";
                ctx.font = getFont(ctx, name, tries);
                ctx.textAlign = "center";
                ctx.fillText(name, x + border + imagewidth + (((x + width - border) - (x + border + imagewidth)) / 2), y + border + 20, 125);
                ctx.fill();
            }
            function init() {
                canvas.height = document.height;
                canvas.width = document.width;
                canvas.style = "border: 1px solid black";
                drawCanvas();
            }
        </script>
    </head>
    <body onload="init();">
        <canvas id="canvas"></canvas>
    </body>
</html>